<template>
  <div>
    <div class="tables" v-html="tableStrings"></div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      tableStrings: ''
    };
  },
  methods: {
    createTables(value) {
      // console.log(value);

      var strings = [];
      strings.push(
        `<table  border="1" bordercolor="#EBEEF5" cellspacing="0" cellpadding="30" align="center" rules="all">
         <caption style="font-size:20px;line-height:30px;height:30px;margin:10px 0;" >${
           value.anzhidianAddress
         }单个家庭信息</caption>
      <tr style="height:50px">
        <th colspan="2">乡镇名称：</th>
        <td colspan="4">${value.oldxiangzhen}</td>
        <th colspan="2">安置点名称:</th>
        <td colspan="5">${value.anzhidianName}</td>
      </tr>
      <tr style="height:40px">
        <td style="width:100px" rowspan="${value.userInfo.length +
          3}">基本情况</td>
        <th style="width:100px" >家庭成员</th>
        <th style="width:100px">称谓</th>
        <th style="width:100px">姓名</th>
        <th style="width:100px">性别</td>
        <th style="width:100px">文化程度</th>
        <th style="width:100px">健康状况</th>
        <th style="width:200px">身份证号码</th>
        <th style="width:200px">联系电话</th>
        <th style="width:100px"  colspan="2">现从事职业</th>
        <th style="width:100px" colspan="2">年收入</th>
      </tr>`
      );
      var strs = `<td rowspan="${value.userInfo.length +
        2}" align="left"  >家庭主要成员</td>`;
      value.userInfo.forEach(item => {
        strs += `<tr style="height:40px">
        
        <td>${item.about}</td>
        <td>${item.Name}</td>
        <td>${item.Sex}</td>
        <td>${item.education}</td>
        <td>${item.health}</td>
        <td>${item.idCard}</td>
        <td>${item.phoneNumber}</td>
        <td  colspan="2">${item.work}</td>
        <td colspan="2">${item.income}</td>
      </tr>`;
      });
      var totalMoney = 0;
      value.userInfo.forEach(item => {
        // console.log(item.income);
        if (Number.income !== NaN) {
          totalMoney += Number(item.income);
        } else {
          this.$message.error(
            '请确认是否输入所有的收入金额，如果收入为0请填写为0,谢谢'
          );
        }
      });
      strs += `<tr style="height:40px">
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td colspan="2">家庭年收入(元)</td>
        <td>${totalMoney}</td>
      </tr>`;
      strings.push(strs);
      strings.push(`<tr style="height:40px">
        <td rowspan="2">结对帮扶情况</td>
        <th colspan="3">帮扶责任人：</th>
        <td colspan="2">${value.helpPeople}</td>
        <th>联系方式:</th>
        <td>${value.helpPeoplePhone}</td>
        <th>帮扶单位:</th>
        <td colspan="3">${value.helpCompany}</td>
      </tr>
        <tr>
        <td colspan="11">
        <div style="padding:20px 0">`);
      var strs2 = '';
      value.helpWay.forEach(item => {
        strs2 += `<p style="margin:10px 0">${item}</p>`;
      });
      strs2 += `</div></td></tr>`;
      strings.push(strs2);
      strings.push(`
              <tr style="height:40px">
          <td rowspan="4">易地搬迁情况</td>
          <th colspan="3">原家庭住址</th>
          <td colspan="3">${value.oldAddresszhen} <span style="padding:0 10px">乡(镇)</span> ${value.oldAddresscun} <span style="padding:0 10px">村</span> ${value.oldAddresszu}</td>
          <th colspan="2">主要困难</th>
          <td colspan="3">${value.masterDifficult}</td>
        </tr>
        <tr style="height:40px">
            <th rowspan="2" colspan="3">现安置点名称</th>
            <td colspan="3">${value.anzhidianAddress}</td>
            <th colspan="2">折旧复垦情况</th>
            <td colspan="3">${value.Depreciation}</td>
        </tr>
        <tr style="height:40px">
            <th >门牌号</th>
            <td colspan="2">${value.houseNumber}</td>
            <th>户型</th>
            <td colspan="2">${value.Apartment}</td>
            <th>菜地情况</th>
            <td colspan="2">${value.vegetablePlot}</td>
        </tr>
            <tr style="height:40px">
            <th>旧住房照片</th>
            <td colspan="5">
                 <div class="imgs">
                    <img src="${value.oldHouseImages}" alt="">
                </div>
            </td>
            <th>新住房照片</th>
            <td colspan="5">
                <div style="height:250px">
                    <img src="${value.newHouseImages}" alt=""  style="height:100%">
                </div>
            </td>
        </tr>
         <tr style="height:40px">
          <td>就业情况</td>
          <td  colspan="6">
              <p>
                  ${value.workinfo}
              </p>
          </td>
          <td></td>
          <td  colspan="4">
              <div style="height:250px">
                  <img src="${value.workImages}" alt="" style="height:100%">
              </div>
          </td>
      </tr>
    </table>
      `);
      this.tableStrings = strings.join('');
    }

  },
  props: ['dataValue'],
  name: 'SingleUserInfo',
  mounted() {
    // console.log(this.dataValue);
    this.createTables(this.dataValue);
  }
};
</script>
<style lang="less" scoped>
</style>